<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>FlinkOnKubernetes</title>
    <link rel="shortcut icon" href="/static/images/favicon.ico">
    <link href="/static/lib/tailwind.min.css" rel="stylesheet">
    <script src="/static/lib/jquery.min.js"></script>
    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <style>
        .bg-indigo-100{background-color:#ebf4ff}
        .border-gray-200{border-color:#edf2f7}
        .bg-gray-100{background-color:#f7fafc}
        .bg-indigo-500{background-color:#667eea}
        .my-32 {margin-top: 6rem;}
        .img-div{width: 100px;position: relative;top: 21px;float: right;border: 1px solid #c7c1c1;height: 53px;border-radius: 5px;}
    </style>
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
<div class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
    <div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-12 flex flex-col items-center">
            <h1 class="text-2xl xl:text-3xl font-extrabold">Kubernetes</h1>
            <div class="w-full flex-1 mt-8">

                <div class="border-b text-center">
                    <div class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">
                      Flink 控制台
                    </div>
                </div>

                <div class="mx-auto max-w-xs my-32">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
                           type="text" placeholder="账户" id="account">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                           type="password" placeholder="密码" id="password">
                    <div style="width: 100%;">
                        <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
                               style="width: 200px;" placeholder="验证码" id="captcha">
                        <div class="img-div">
                            <input type="hidden" id="captchaUid">
                            <img src="" id="captchaImg" style="height: 100%; border-radius: 5px; cursor:pointer;" onclick="captcha()"/>
                        </div>
                    </div>
                    <button class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none" onclick="login()">
                        <span class="ml-3">登 录</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
        <div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat" style="background-image: url('/static/images/dlbox.svg');"></div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/js/login.js"></script>
</html>